<!--vue模板-->
<template>

  <div>

    <!--货代询价搜索-->
    <div >
      <el-form>
        <el-row>
          <el-col :span="5">
            <el-form-item label="询价编码:">
              <el-input v-model="filters.quote_coding" placeholder="请输入" style="margin-right: 20px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="订单编号:">
              <el-input v-model="filters.order_sn" placeholder="请输入" style="margin-right: 20px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="状态:">
              <el-select v-model="filters.status" placeholder="请选择" style="margin-right: 20px;">
                <el-option v-for="item in statusOptions" :key = "item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" @click="initData">搜索</el-button>
            <el-button type="primary" @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <!--客户列表-->
    <el-table :data="tableData" style="width: 100%" stripe border>
      <el-table-column
        type="index"
        label="行号"
        width="100"
        header-align="center"
        align="center"
      />
      <el-table-column
        prop="quote_coding"
        label="询价编码"
        width="200"
        header-align="left"
      />
      <el-table-column
        prop="order_sn"
        label="订单编号"
        width="200"
        header-align="left"
      />
      <el-table-column

        prop="create_time"
        label="询价时间"
        width="275"
        header-align="left"
      />
      <el-table-column
        prop="status"
        label="状态"
        width="200"
        header-align="left"
      >
        <template v-slot="{row}">
          <span v-if="row.status == 0">待报价</span>
          <span v-else-if="row.status == 1">报价中</span>
          <span v-else-if="row.status == 2">已报价</span>
        </template>
      </el-table-column>
      <el-table-column

        prop="reason"
        label="原因"
        width="150"
        header-align="left"
      />
      <el-table-column
        label="操作"
        header-align="center"
        align="center">
        <template v-slot="{ row }">
          <el-button
            v-if="row.status == 5"
            link type="primary"
            title="修改"
            style="font-weight: bold;"

          >编辑</el-button>
          <el-button
            v-if="row.status == 0"
            link type="primary"
            style="font-weight: bold;"
            @click="addQuotation(row.quote_coding)"
          >报价</el-button>
          <el-button
            v-if="row.status == 1 || row.status == 2"
            link type="primary"
            @click="look(row)"
            style="font-weight: bold;"
          >查看报价</el-button>
          <el-button
            v-if="row.status == 1 || row.status == 2"
            link type="primary" style="font-weight: bold;"
            @click="update(row)"
          >修改报价</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div
      style="
        background-color: #fff;
        height: 50px;
        line-height: 50px;
        text-align: right;
      "
    >
      <el-pagination
        background
        :page-size="pageSize"
        layout="total,sizes,prev, pager, next,jumper"
        :total="total"
        @size-change="chgsize"
        @current-change="chgpg"
      />
    </div>
  </div>
</template>

<!--vue 组件选项定义-->
<script setup>
import {ref, onMounted} from "vue";
//引入api
import { queryForwarderInquiry} from "@/api/forwarderInquiry.js";
//引入图标
import {Delete, Edit} from "@element-plus/icons-vue";
//引入路由
import {useRouter} from "vue-router";
import {queryForwarderInquiryByQuoteStatus} from "@/api/forwarderQuote.js";
//表格数据
const tableData = ref([]);
//路由实例
const router = useRouter();

//状态选项
const statusOptions = [
  {
    label: "待报价",
    value: 0
  },
  {
    label: "报价中",
    value: 1
  },
  {
    label: "已报价",
    value: 2
  }
];

//过滤条件
const filters = ref({
  quote_coding: "",
  order_sn: "",
  status: ""
});

//重置
function reset() {
  filters.value = {
    quote_coding: "",
    order_sn: "",
    status: ""
  };
  initData();
}

/**
 * 添加货代报价单
 * @param quote_coding
 */
function addQuotation(quote_coding) {
  console.log("quote_coding>>>", quote_coding);
  router.push({path: "/forwarder/quote/list", query: {quote_coding}});
}
//修改
function update(row) {

  const quote_coding = row.quote_coding;
  const quotation = row.quotation;
    console.log("cccc",row)
    router.push({
      path: "/forwarder/editFwQuote",
      query: {quote_coding,quotation}
    })
}
//查看报价
function look(row) {
  const quote_coding = row.quote_coding;
  const quotation = row.quotation;
  router.push({
    path: "/forwarder/lookFwQuote",query: {quote_coding,quotation}
  });
}
//分页信息
const page = ref(1); //当前页 默认第1页
const pageSize = ref(10); //每页记录数
const total = ref(0); //总记录数

//每页记录数变化
function chgsize(size) {
  //更改每页记录数
  pageSize.value = size;
  //从每页开始查询
  page.value = 1;
  //查询数据
  initData();
}

//页面发生变化
function chgpg(pg) {
  //更改当前页
  page.value = pg;
  //查询数据
  initData();
}


//查询数据
async function initData() {
  //请求
  let data = {
    page: page.value,
    pageSize: pageSize.value,
    quote_coding: filters.value.quote_coding,
    order_sn: filters.value.order_sn,
    status: filters.value.status
  };
  let res = await queryForwarderInquiryByQuoteStatus(data);
  if (res.code == 200) {
    console.log("res>>>xxx", res)
    tableData.value = res.data.data;
    //接收分页信息
    page.value = res.data.page;
    pageSize.value = res.data.pageSize;
    total.value = res.data.total;
  }
}

//生命周期钩子
onMounted(() => {
  initData();
});
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>

</style>
